<!doctype html>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="css/app/mall/mall.css" />
		<link rel="stylesheet" href="css/iconfont.css" />
		<script type="text/javascript" src="js/vue.min.js"></script>
		<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
		
		<script src="js/mui.min.js"></script>
		<script src="js/parabola.min.js"></script>
		<script src="js/requestAnimationFrame.js"></script>
		<script src="js/common.js"></script>
		<script src="../js/jquery.fly.min.js"></script>
	</head>

	<body>
		
		<header class="mui-bar mui-bar-nav">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left tp-back"></a>
		    <h1 class="mui-title">包子铺</h1>
			<a class="mui-pull-right" id="span-buns-order" style="font-size:16px;color: white;padding-top:11px">订单</a>
		</header>
		
		<div class="mui-content" id="malls" v-cloak>
			<!--左部列表-->
			<div class="div-product-parent">
				<div class="left">
					<template v-for="(item,index) in items">
						<div style="height:60px;">
							<a :href="'#left'+index" :class="{press_a:index1==index}" @click="aonlick(index,$event)">{{item.name}}</br>
							</a>
							<div class="dot_num" v-bind:class="{dot_num_display:item.chanceSortNum<=0}">{{item.chanceSortNum}}</div>

						</div>
					</template>
				</div>

				<!--右部列表-->
				<div class="right">
					<div class="right_list_title">
						<template v-for="(item,index) in items">
							<div style="width: 100%;float:left;" class="right_list_item" :id="'left'+index">
								<div style="width: 100%;float: left;">
									<p style="margin-top: 10px;font-size: 14px;color: #000000;font-weight: bold;">{{item.name}}</p>
									<hr size="1px" />
								</div>
								<ul style="padding-left:0px;width:100%;">
									<li style="width: 100%;" v-for="(info,infoindex) in item.infos">
										<div style="width: 100%;float: left;margin-top:20px;">
											<img width="75px" height="75px" style="float: left;border-radius:8px;" :src="info.filepath" />
											<div style="height:100%;float:left;margin-left: 5px;">
												<p style="font-size:18px;color:black;">{{info.bunsname}}</p>
												<p style="font-size:14px;color:gray;">数量{{info.bunsnum}}</p>
												<p style="margin-top:10px;color:red;font-size:18px;">￥{{info.bunsunitprice}}</p>
											</div>

											<div class="div-add-jian" style="position:relative;">
												<transition name="fade">
													<button class="btnjian btn-addstyle" v-on:click="jianonclick(index,infoindex)" v-if="info.chancenum>0" v-bind:class="{span_jiangone:info.chancenum<=0}">—</button>
												</transition>
												<transition name="fade">
													<span v-bind:class="{span_jiangone:info.chancenum<=0}" v-if="info.chancenum>0">{{info.chancenum}}</span>
												</transition>
												<button @click="jiaonclick(index,infoindex,$event)" class="btn-jia btn-addstyle">＋</button>
												<button id="ball_dot" class="btn-jia btn-addstyle" style="position:relative;right:30px;display:none;"></button>
												<!--<button class="btn-add-reduce" style="position:absolute;bottom:5px;z-index:-5;" id="btn-jia">＋</button>-->
											</div>
										</div>
									</li>
								</ul>
							</div>
						</template>
					</div>
				</div>
			</div>
			<!--底部购物车-->
			<div class="div-shop-car">
				<!--<div class='div-shop-car-back'>

				</div>-->
				<div class='div-shop-car-content'>
					<!---->
					<div style="background:white;width:100%;text-align: right;padding:5px;overflow: hidden;">
						<span class="mui-icon iconfont icon-qingkong"></span>
						<span id='p-clear' style="color:black;font-size:14px;text-align:right;width:100%;padding-right:10px;">清空</span>
					</div>
					<div class="div-content-car-list">
						<template v-for="(item,index) in items">
							<div class="div-content-car-list-item" v-for="(info,infoindex) in item.infos" v-if="info.chancenum>0">
								<hr  width="100%" style="margin-left: 10px;height:1px;border:none;border-top:1px solid whitesmoke;" />
								<div style="width:100%;line-height:49px;height:49px;padding-left:10px;">
									<div style="width:50%;float:left;">{{info.bunsname}}</div>
									<div style="width:21%;color: red;float:left;font-size:20px;">￥{{info.unittotalprice}}</div>
									<div style="width:29%;float:left;">
										<div style="text-align: right;margin-right:20px;">
										<button class="btn-add-reduce" v-on:click="jianonclick(index,infoindex)">—</button>
										<span style="height:100%;vertical-align: middle;">{{info.chancenum}}</span>
										<button class="btn-add-reduce" @click="jiaonclick(index,infoindex)">＋</button>

									</div>
									</div>
								</div>
							</div>
						</template>
					</div>
				</div>

			</div>
			<div class="div_bottom_parent">
				
				<span class="bottom-dot-num" id="span-bottom-dot-num" v-bind:class="{dot_num_display:totalNum<=0}">{{totalNum}}</span>
				<p v-if="totalPrice>0">总价￥{{totalPrice}}</p>
				<p v-else>请选择商品</p>
				<button :class="totalPrice > 0? 'btn-go-buycan':'btn-go-buyuncan'" v-on:click="gobuy()">去结算</button>
				<!--<button class="btn-go-buyuncan" v-else>去结算</button>-->
				
				
			
		</div>
		</div>
		<script type="text/javascript" src="js/app/mall/mall.js"></script>
	</body>

</html>